<template>
	<view class="head"
		:style="{ height: selectData.navBarHeight ? (selectData.navBarHeight + 'px') : (datas.height + 'rpx'), width: selectData.screenWidth + 'px', backgroundColor: datas.isColor ? datas.color : '' }">
		<view class="head_box_bgImg" v-show="datas.headerisImg">
			<image :src="datas.img" style="width:100%;" mode="widthFix"></image>
		</view>
		<!-- 导航 -->
		<view class="box"
			:style="{ height: datas.isBoxHeightAuto ? 'auto' : selectData.navBarHeight + 'px', width: selectData.screenWidth + 'px', backgroundColor: datas.fullImag ? '' : datas.color }">

			<view
				:style="{ height: (selectData.navBarHeightTitle + selectData.statusBarHeight) + 'px', width: selectData.screenWidth + 'px', backgroundColor: datas.color, position: 'absolute', top: 0, left: 0 }"
				v-if="datas.fullImag"></view>

			<!-- 状态栏 -->
			<view class="null"
				:style="{ height: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px' }">
			</view>
			<!-- 导航内容 -->
			<view class="back flex" :class="{ borders: datas.isBorder }"
				:style="{ top: selectData.statusBarHeight + 'px', height: selectData.navBarHeightTitle + 'px' }">
				<view class="back_box_bgImg" v-show="datas.backisImg">
					<image style="width:100%;" :src="datas.img" mode="widthFix"></image>
				</view>
				<view class="back_item">
					<view class="backImg" @click="!datas.noBack ? goBack() : ''">
						<image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back_w.png"
							mode="aspectFit" v-if="!datas.noBack && datas.backColor == 'white'">
						</image>
						<image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png" mode="aspectFit"
							v-else-if="!datas.noBack">
						</image>
						<view class="icon" v-else></view>
					</view>

					<text class="text ft-32 fw-800" :style="{ color: datas.ftColor || '#333' }">{{datas.title
						+ '=>' + headerContentH + '==>' + headerContentH2}}</text>
					<view :style="{ width: (selectData.menuButtonRight ? selectData.menuButtonRight : 90) + 'px' }"
						style="color: aqua;height: 100px;">
					</view>
				</view>
			</view>
			<view class="headerContent" id="headerContent" ref="headerContent"
				:style="{ top: (datas.fullImag ? '' : selectData.navBarContentTop + 'px'), bottom: (datas.fullImag ? (datas.bottom ? datas.bottom : '0px') : ''), width: selectData.screenWidth + 'px', position: selectData.statusBarHeight ? 'absolute' : 'relative' }">
				<slot name="headerContent"></slot>
			</view>
		</view>
	</view>
</template>

<script setup lang="js">
import { onLoad, onReady } from '@dcloudio/uni-app';
import {
	ref,
	defineProps,
	watch,
	toRef,
	toRefs,
	reactive,
	nextTick,
	getCurrentInstance,
	onMounted
} from 'vue';
const instance = getCurrentInstance()

let props = defineProps(['datas'])
const {
	datas
} = toRefs(props)
watch(() => datas, (newValue, oldValue) => {
}, {
	immediate: true,
	deep: true
})
// 返回键
const goBack = () => {
	let pages = getCurrentPages();
	if (pages.length > 1) {
		uni.navigateBack(-1)
	} else {
		wx.reLaunch({
			url: '/pages/index/index',
		})
	}
}

let selectData = ref({})
let aspectRatio = ref(0)
const query = uni.createSelectorQuery().in(instance);
const getImageInfoSync = (src) => {
	return new Promise((resolve, reject) => {
		uni.getImageInfo({
			src: datas.value.img,
			success: (res) => resolve(res),
			fail: (err) => reject(err)
		});
	})
}
let systemInfo = uni.getSystemInfoSync()
onMounted(() => {

})
onLoad(() => {
	// setTimeout(() => {
	nextTick(() => {
		let contentH = 0
		const dpr = systemInfo.pixelRatio

		query.select('#headerContent').boundingClientRect(data => {
			contentH = Math.round(data.height * dpr) / dpr || 0
			let statusBarHeight = systemInfo.statusBarHeight
			let screenWidth = systemInfo.screenWidth
			let menuButtonInfo = 0
			let navHeight = 0
			// APP端逻辑
			// #ifdef APP-PLUS
			// App端：状态栏高度 + 标题栏高度（iOS:44px, Android:48px）
			navHeight = systemInfo.platform === 'ios' ? 44 : 48;
			// #endif

			// 微信小程序逻辑
			// #ifdef MP
			menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			navHeight = Math.abs(menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
			// #endif
			let navBarHeight = Number(navHeight + statusBarHeight + contentH);//导航总高
			if (datas.value.fullImag) {
				if (!datas.value.coverImag) {
					navBarHeight = Number(datas.value.imgHeight * screenWidth / 750)
				} else {
					navBarHeight = Number(datas.value.imgHeight * screenWidth / 750 + contentH);
				}
			}

			selectData.value = {
				// headHeight: headHeight,
				screenWidth: screenWidth,
				statusBarHeight: statusBarHeight,
				navBarHeight: 1000,//导航总高
				navBarContentTop: navHeight + statusBarHeight,//导航文插槽距离顶部距离
				navBarHeightTitle: navHeight,//导航文字模块总高
				capsuleSpace: systemInfo.screenWidth - menuButtonInfo.right + 6,
				menuButtonRight: (screenWidth - menuButtonInfo.right) + menuButtonInfo.width,

			}


		}).exec();


	})
	// }, 50);
})
const headerContentH = ref(0)
const headerContentH2 = ref(0)
let headerContent = ref(null)
onReady(async () => {
	// let res = []
	// if (datas.value?.img) res = await getImageInfoSync()
	// aspectRatio.value = (res.height / res.width) * 100
	setTimeout(() => {
		nextTick(() => {
			// uni.createSelectorQuery().in(instance?.proxy)
			// 	.select('#headerContent')
			// 	.boundingClientRect(res => {
			// 		if (res?.height) {
			// 			console.log('高度:', res?.height || '未获取到');
			// 			contentH = Math.round(res.height * dpr) / dpr || 0
			// 			headerContentH2.value = res.height
			// 		}


			// 	}).exec();
			// let a = headerContent.value.getBoundingClientRect()
			let contentH = 0
			const dpr = systemInfo.pixelRatio

			query.select('#headerContent').boundingClientRect(data => {
				if (data?.height) { //导航有内容

					contentH = Math.round(data.height * dpr) / dpr || 0
					headerContentH.value = data.height
				}
				let statusBarHeight = systemInfo.statusBarHeight
				let screenWidth = systemInfo.screenWidth
				let menuButtonInfo = 0
				let navHeight = 0
				// APP端逻辑
				// #ifdef APP-PLUS
				// App端：状态栏高度 + 标题栏高度（iOS:44px, Android:48px）
				navHeight = systemInfo.platform == 'ios' ? 44 : 48;
				// #endif

				// 微信小程序逻辑
				// #ifdef MP
				menuButtonInfo = wx.getMenuButtonBoundingClientRect();
				navHeight = Math.abs(menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
				// #endif
				let navBarHeight = Number(navHeight + statusBarHeight );//导航总高
				// 图片背景
				if (datas.value.fullImag) {
					if (!datas.value.coverImag) {
						navBarHeight = Number(datas.value.imgHeight * screenWidth / 750)
					} else {
						navBarHeight = Number(datas.value.imgHeight * screenWidth / 750 + contentH);
					}
				}

				// selectData.value.statusBarHeight = statusBarHeight
				selectData.value.navBarHeight = 1000//导航总高
				selectData.value.navBarContentTop = navHeight + statusBarHeight//导航文插槽距离顶部距离
				selectData.value.navBarHeightTitle = navHeight//导航文字模块总高
				selectData.value.capsuleSpace = systemInfo.screenWidth - menuButtonInfo.right + 6
				selectData.value.menuButtonRight = (screenWidth - menuButtonInfo.right) + menuButtonInfo.width




			}).exec();


		})
	}, 500);

})



</script>

<style lang="scss" scoped>
.head {
	// position: relative;
	// height: 764rpx;
	// background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/shareHead.png");

	background-size: 100% 100%;
	width: 100%;
	left: 0;
	top: 0;
	position: relative;
	overflow: hidden;


	.head_box_bgImg {
		width: 100%;
		height: calc(100% - 2rpx);
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		// background-color: red;
		object-fit: cover;
		/* 或使用contain */
	}

	.back_box_bgImg {
		width: 100%;
		height: calc(100% - 2rpx);
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		// background-color: red;
		object-fit: cover;
		/* 或使用contain */
	}

	.null {
		width: 100%;
		// height: 88rpx;
		// background-color: red;
	}

	.borders {
		border-bottom: 2rpx solid #F1F1F1;
		// border-bottom: 2rpx solid red;
	}

	.box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		// background: image('https://cdn.oss.bon-top.cn/static_bc/images/head_bg.png');
		overflow: hidden;
		width: 100vw;
		height: fit-content;
	}

	.back {
		height: 88rpx;
		width: 100%;

		&_item {
			// height: 88rpx;
			// margin-top: 88rpx;
			position: absolute;
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			overflow: hidden;

			.backImg {
				width: 60rpx;
				// background: red;
				margin-right: auto;
				margin-left: 16rpx;
				text-align: center;

			}

			.text {
				width: 366rpx;
				text-align: center;

			}
		}

		.icon {
			width: 28rpx;
			height: 48rpx;
		}
	}

	.headerContent {
		position: absolute;
		box-sizing: border-box;
		// z-index: -1;
	}

}
</style>